import React, { useState, useCallback, useMemo } from 'react';
import { List } from 'react-vant'
import { useNavigate } from 'react-router-dom';

import Loading from '@/components/Loading';
import HeadTop from '@/components/HeadTop';
import ListItem from '@/components/ListItem';
import { listFields } from '../_parts/const';
import './index.less'
import ApiIndex from '@/api/spotCheck';

import { MyContext } from '@/context/index';
const { Provider } = MyContext

const Index = () => {
    const [inputVal, setInputVal] = useState('');
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(false);
    const [finished, setFinished] = useState(false);
    const [pageIndex, setPageIndex] = useState(1);
    const navigate = useNavigate();

    const getList = async (value = '', search) => {
        setLoading(true);
        if (loading) return
        let params = {
            page: search ? 1 : pageIndex,
            size: 10,
            type: 'INSPECTION',
            statusList: ['WAIT_FINISH', 'PROCESSING'],
            deviceCode: value || ''
        }
        try {
            let res = null
            if (value) {
                res = await ApiIndex.searchKey(params)
            } else {
                res = await ApiIndex.getList(params);
            }
            if (res.data.code == 0) {
                let _data = res.data.data.records
                if (search == 'search') {
                    setList(_data);
                    setFinished(true);
                } else {
                    setList((prevList) => [...prevList, ..._data]);
                }

                // 判断是否还有更多数据
                if (_data.length < 10) {
                    setFinished(true);
                } else {
                    setPageIndex((prevIndex) => prevIndex + 1);
                }
            } else {
                setFinished(true);
            }
        } catch (error) {
            console.error('Error:', error);
            setFinished(true);
        } finally {
            setLoading(false);
        }
    }

    // 搜索
    const getSearchVal = useCallback((value) => {
        setPageIndex(1)
        setInputVal(value)
        let _value = value
        if (value.indexOf("*") != -1) {
            _value = value.split("*")[0]
        }

        getList(_value, 'search')
    })

    return (
        <div className='page-wrapper'>
            {
                loading ? <Loading></Loading> : null
            }
            <Provider value={{ placeholderTxt: "请输入点检编号", inputVal: inputVal }}>
                <HeadTop
                    search={true}
                    title="设备点检"
                    rightTxt="点检记录"
                    getHandleRight={() => navigate("/spotCheckRecord")}
                    sendHandlePressVal={getSearchVal}
                ></HeadTop>
            </Provider>

            <div className="page-body" style={{ padding: 15 }}>
                <List finished={finished} errorText='请求失败，点击重新加载' onLoad={getList}>
                    {
                        list.map(el => <ListItem
                            key={el.id}
                            item={el}
                            // history={history}
                            detailUrl="/spotCheckDetail"
                            time={true}
                            listFields={listFields}
                        ></ListItem>)
                    }
                    {finished ? <div className='loadingTxt'>无更多数据</div> : null}
                </List>
            </div>
        </div>
    );
}

export default Index;
